<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/public::common-public}">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

<div>
    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="novelname" value="" placeholder="请输入小说名称" class="layui-input" lay-affix="clear">
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-btn-container layui-col-xs12">
                <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" onclick="novel.queryNovelData()">搜索</button>
            </div>
        </div>

    </form>
</div>

<div>
    <table id="novelTable" lay-filter="novelTableFilter"></table>
</div>

<div id="novelDialog" style="display: none">
    <form class="layui-form" lay-filter="novelForm" id="novelForm">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="novelname" lay-verify="required" placeholder="请输入小说名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <input type="text" name="image" lay-verify="required" placeholder="请输入图片路径" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">上传按钮</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload-button">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">图片预览</label>
            <div class="layui-input-block">
                <img id="image" alt="" style="width:300px;height:300px;">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="text" name="noveltype" lay-verify="required" placeholder="请输入小说类型"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
                <input type="text" name="author" lay-verify="required" placeholder="请输入小说作者" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="text" name="state" lay-verify="required" placeholder="请输入小说状态" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">已更章节</label>
            <div class="layui-input-block">
                <input type="text" name="chapternum" lay-verify="required" placeholder="请输入小说状态"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">小说简介</label>
            <div class="layui-input-block">
                <input type="text" name="introduction" lay-verify="required" placeholder="请输入小说简介"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</div>

<!-- 表格标签工具栏 -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <div class="layui-btn-group">
            <button type="button" lay-event="add" class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm"><i
                    class="layui-icon">&#xe654;</i>新增
            </button>
        </div>
    </div>
</script>

<!-- 表格行工具栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

<script th:src="@{/js/novel.js}" type="application/javascript"></script>
</body>
</html>
